<template>
  <div>
    <el-button size="small" @click="chooseVisible = true">选择协议</el-button>
    <el-row v-if="checked" type="flex" class="preview">
      <el-row type="flex" justify="space-between" class="info">
        <el-tooltip effect="dark" :content="checkedTitle" placement="bottom">
          <div class="name">{{ checkedTitle }}</div>
        </el-tooltip>
      </el-row>
    </el-row>
    <el-dialog title="选择协议" :visible.sync="chooseVisible" width="40%" :close-on-click-modal="false">
      <el-row type="flex" align="middle" justify="center">
        <div class="item__title"><span>协议</span></div>
        <div>
          <el-select
            v-model="checked"
            placeholder="输入协议名称或标识搜索"
            clearable
            filterable
            remote
            :remote-method="search"
            :loading="loading"
            loading-text="正在搜索协议"
            no-data-text="无相关协议"
            size="small"
            class="item__select"
          >
            <el-option v-for="item in options" :key="item.id" :label="item.title" :value="item.id" />
          </el-select>
        </div>
      </el-row>
      <div slot="footer" class="choose-footer">
        <el-button size="small" @click="chooseVisible = false">取消</el-button>
        <el-button type="primary" size="small" @click="setSelect">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Number,
      default: 0
    },
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      chooseVisible: false,
      options: this.value === 0 ? [] : [{ id: this.value, title: this.title }],
      loading: false,
      checked: this.value === 0 ? '' : this.value,
      checkedTitle: this.title
    };
  },
  created() {
    console.log(this.checked);
  },
  methods: {
    search: function(keyword) {
      if (keyword !== '') {
        this.loading = true;
        this.$http.get(
          '/admin/content/agreement/search',
          {
            keyword: keyword
          },
          response => {
            this.options = response.data;
            this.loading = false;
          },
          _ => {
            this.options = [];
            this.$message.error('搜索协议失败，请重试');
            this.loading = false;
          },
          false
        );
      } else {
        this.options = [];
      }
    },
    setSelect: function() {
      this.$emit('update:value', this.checked);
      const info = this.options.find(item => item.id == this.checked);
      this.checkedTitle = info.title;
      this.chooseVisible = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.item__title {
  padding: 0 12px 0 0;
}
.item__select {
  width: 400px;
}
.preview {
  margin-top: 10px;
  border: 1px solid #ececec;
  width: max-content;
  padding: 5px;
  .info {
    flex: 1;
    flex-direction: column;
    .name {
      width: 100%;
      font-size: 14px;
      color: #333;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>
